<template>
  <el-form label-width="90px" size="mini">
    <el-form-item label="边框">
      <el-radio-group v-model="attribute.border.borderClass">
        <el-radio-button label="no-border">无边框</el-radio-button>
        <el-radio-button label="bottom-border">下边框</el-radio-button>
        <el-radio-button label="all-border">全部</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="边框颜色">
      <el-color-picker v-model="attribute.border.borderColor"/>
    </el-form-item>

    <el-collapse value="1" class="customer-collapse">
      <el-collapse-item name="1" title="表头">
        <th-option :attribute="attribute.th"/>
      </el-collapse-item>
      <el-collapse-item name="2" title="表行">
        <th-option :attribute="attribute.td"/>
        <tm-group label="奇数行">
          <el-form-item label="背景色">
            <tm-color-range  v-model="attribute.even.backgroundColor" />
          </el-form-item>
          <el-form-item label="背景图片">
            <tm-img-pick  v-model="attribute.even.backgroundImage" />
          </el-form-item>
        </tm-group>
      </el-collapse-item>
      <el-collapse-item name="3" title="列设置">
        <el-form-item label="">
          <el-button type="info" @click="onAdd">新增列</el-button>
        </el-form-item>
       <div class="table-wrap">
         <sys-table class="screen-table" @row-click="onEdit" :columns="metadata" border stripe size="mini" :show-page="false" :data="attribute.columns">
         </sys-table>
       </div>
      </el-collapse-item>
      <el-collapse-item name="4" title="滚动设置">
        <el-form-item label="启用">
          <el-switch v-model="attribute.enabledScroll"  />
        </el-form-item>
        <el-form-item label="滚动方向">
          <el-radio-group v-model="attribute.scroll.direction">
            <el-radio-button :label="1">向上</el-radio-button>
            <el-radio-button :label="0">向上</el-radio-button>
          </el-radio-group>
        </el-form-item>
       <tm-group label="时间距离">
         <el-form-item label="达到数量滚动">
           <el-input-number v-model="attribute.scroll.limitMoveNum" :min="1"/>
         </el-form-item>
         <el-form-item label="速度">
           <el-input-number v-model="attribute.scroll.step" :min="1" :max="10" >
           </el-input-number>
         </el-form-item>
         <el-form-item label="单步运动高度">
           <el-input-number v-model="attribute.scroll.singleHeight" :min="0"  placeholder="请输入整数"/>
         </el-form-item>
         <el-form-item label="单步运动时间">
           <el-input-number v-model="attribute.scroll.waitTime" :step="1000" placeholder="请输微秒"/>
         </el-form-item>
       </tm-group>
      </el-collapse-item>

    </el-collapse>

    <simple-dialog2 v-bind.sync="dialog" theme="dark" @on-ok="onDialogOk"/>
  </el-form>
</template>

<script>
import thOption from './th-option'
import sysTable from "@/components/common/page/sys-table";
import dialogMixin from "@/components/common/dialog/dialog-mixin";
import columnEdit from './column-edit'
import tmColorRange from "@/package/components/tm-color-range";
import tmImgPick from "@/package/components/tm-img-pick";

export default {
  name: 'scroll-table-option',
  cnName: '滚动表格配置',
  mixins: [dialogMixin],
  components: {thOption, sysTable, tmColorRange, tmImgPick},
  props: {
    attribute: Object
  },
  data() {
    return {
      metadata: [
        {label: '字段英文名', prop: 'prop'},
        {label: '字段中文名', prop: 'label'},
        {label: '宽度', prop: 'width'}
      ]
    }
  },
  methods: {
    onAdd(evt) {
      const origin = {
        x: evt.pageX,
        y: evt.pageY
      }
      this.setDialog({
        title: '新增列',
        width: '800px',
        origin: origin,
        comp: columnEdit,
        props: {

        }
      })
    },
    onEdit(row) {
      this.setDialog({
        title: '编辑列',
        width: '800px',
        comp: columnEdit,
        props: {
          data: row
        }
      })
    },
    onDelete(index) {
      console.info(index)
    },
    onDialogOk(flag, data) {
      this.dialog.visible = false
      const index = this.attribute.columns.findIndex(o => o.id === data.id)

      if(flag === 0) {
        this.attribute.columns.splice(index, 1)
        return
      }

      console.info('ook:', data)

      if(index === -1) {
        this.attribute.columns.push(data)
      } else {
        this.attribute.columns[index] = data
        this.attribute.columns = [].concat(this.attribute.columns)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.table-wrap {
  padding: 0 10px;
}
</style>

